<template>
	<div class="page-header">
		<el-button @click="onDel()" type="danger" size="small">批量删除</el-button>
	</div>
	<div class="page-card">
		<el-table :data="postList" @selection-change="handleSelectionChange"  v-loading="loading">
			<el-table-column type="selection" width="55" />
			<el-table-column label="头像" width="100px" align="center">
				<template #default="scope">
					<el-avatar :size="35" :src="scope.row.userInfo.avatar"></el-avatar>
				</template>
			</el-table-column>
			<el-table-column prop="userInfo.username" label="昵称" />
			<el-table-column prop="content" label="内容" show-overflow-tooltip />
			<el-table-column label="媒体">
				<template #default="scope">
					<div class="img-wrap">
						<img v-for="(item,index) in scope.row.img_list" :src="item" :key="index" />
					</div>
					<video style="width: 100px;height: 100px;" v-if="scope.row.video_src"
						:src="scope.row.video_src"></video>
				</template>
			</el-table-column>
			<el-table-column :formatter="$utils.timeFormat" prop="create_time" label="发布时间" />
			<el-table-column fixed="right" label="管理" width="120">
				<template #default="scope">
					<el-button @click="onDel(scope.row,scope.$index)" type="danger" size="small">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
			<QPagination :current-page="currentPage" :page-count="pageCount" :page-size="pageSize"
			:data-total="dataTotal" @current-change="pageChange"></QPagination>
	</div>
</template>
<script setup>
import { ref, onMounted } from "vue"
import { ElMessage, ElMessageBox } from 'element-plus'
import http from "@/utils/request"
import QPagination from '../../components/q-pagination/q-pagination.vue';

let postList = ref([]);
let pageCount = ref(0);
let currentPage = ref(1);
let dataTotal = ref(1);
const pageSize = ref(10);
let selectIds = ref([]);
let loading = ref(false);

onMounted(function () {
	getPostList();
})

function getPostList() {
	loading.value = true;
	http.get('/api/post/list', {
		page: currentPage.value
	}).then(res => {
		if (res.code == 200) {
			pageCount.value = res.result.last_page;
			dataTotal.value = res.result.total;
			postList.value = res.result.data;
		}

		loading.value = false;
	});
}

function pageChange(page) {
	currentPage.value = page;
	getPostList();
}

function handleSelectionChange(e) {
	let ids = [];
	e.forEach(item => {
		ids.push(item.id)
	})

	selectIds.value = ids;
}

function onDel(row, index) {
	ElMessageBox.confirm(
		'确认删除?',
		'提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	}
	).then(() => {
		let ids = []
		if (row) {
			ids.push(row.id)
		} else {
			ids = selectIds.value
		}

		http.post('/admin/post/delete', {
			post_ids: ids
		}).then(res => {
			if (res.code == 200) {
				getPostList();
				ElMessage({
					type: 'success',
					message: '删除成功',
				})
			} else {
				ElMessage({
					type: 'error',
					message: '删除失败',
				})
			}
		})
	})
}
</script>

<style lang="scss" scoped="scoped">
.img-wrap {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 2px;

	img {
		width: 100%;
		height: 80px;
	}
}
</style>
